<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="imagetoolbar" content="no"> <!--ie image gizmo OFF!-->

    <style type="text/css">
    body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
    body {
	border: 0px;
	margin: 0px;
	padding: 0px;
    }
    #map {
	width: 65%;
	height: 100%;
	border: 0px;
	padding: 0px;
    }
    </style>

    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
      <!--
	var lat = 900863; 
	var lon = 235829;
	var zoom = 6;
        var map, layer;

        function init(){
	    // these should be object methods or something
            map = new OpenLayers.Map( $('map'), {maxExtent: new OpenLayers.Bounds(33861, 717605, 330846, 1019656), maxResolution: 296985/1024, projection:"EPSG:2805" } );
            var basemap = new OpenLayers.Layer.WMS( "Boston", 
                "http://boston.freemap.in/cgi-bin/mapserv?",
                {map: '/www/freemap.in/boston/map/mass.map', layers: 'border,water,roads', format: 'png'} );
            var rapid = new OpenLayers.Layer.WMS( "Rapid Transit", 
                "http://boston.freemap.in/cgi-bin/mapserv?",
                {map: '/www/freemap.in/boston/map/mass.map', layers: 'rapid_transit', format: 'png', transparent:'true'} );
            var buildings = new OpenLayers.Layer.WMS( "Buildings", 
                "http://boston.freemap.in/cgi-bin/mapserv?",
                {map: '/www/freemap.in/boston/map/mass.map', layers: 'buildings', format: 'png', transparent:'true'} );
                
            map.addLayer(basemap);
            map.addLayer(rapid);
            map.addLayer(buildings);
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
        }
   function getaddress() {
      if (!document.getElementById('address').value) {return; }
                    document.getElementById('status').innerHTML = "Finding address...";
      var address = document.getElementById('address').value;
      address = escape(address);
      addr = "/geocode.cgi?address="+address;
      var handler = XMLrequest();
      if (handler) {
               handler.onreadystatechange=function() {
                   if (handler.readyState == 4 && handler.status == 200) {
                   var latlon = handler.responseText;
                   latlon = latlon.split(",");
                   if (latlon[1]) {
                       map.setCenter(new OpenLayers.LonLat(parseFloat(latlon[1]), parseFloat(latlon[0])), 15);
                       document.getElementById('status').innerHTML = "";
                   
                   } else {
                    document.getElementById('status').innerHTML = "Could not find address, sorry.";
                   }
                   }
               }
               handler.open("GET", addr, true);
               handler.send('');
           }
   }
function XMLrequest() {
xmlhttp={};
try {
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) { }
}
try {
  xmlhttp = new XMLHttpRequest();
} catch (e) {}
return xmlhttp;
}
function setLink() {
	var link = document.getElementById("link");
	var center = map.getCenter();
	var zoom = map.getZoom();
	link.innerHTML="http://boston.freemap.in/?zoom="+zoom+"&amp;lat="+center.lat+"&amp;lon="+center.lon;
}	
//      -->
    </script>
  </head>

<body onload="init()">
<div id="right" style="float:right;width:30%;padding:10px;" ><h1>Boston Free Map</h1><!--Search: <input type="text" id='address' name="address"><input type="submit" value="Go!" onclick="javascript:getaddress()"/>--><div id="status" style="height:20px;min-height:20px;">&nbsp;</div>
    <div>Map powered by <a href="http://www.openlayers.org/">OpenLayers</a>
	 and <a href="http://mapserver.gis.umn.edu/">MapServer</a>.
         Data downloaded from
	 <a href="http://www.mass.gov/mgis/">Office of Geographic and Environmental Information (MassGIS)</a>.</div>
	 <!--<a onclick="setLink(); return false" href="#" id="update">Update Link</a>
	 <div id="link"></div>-->
	 </div>
    <div id="map"></div>
</body>
</html>
